import React, { VFC, useState} from "react"
import { Upload, message } from 'antd';
// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
type propType = {
  dataList:any[]
}
const select:VFC<propType> = (props:propType) => {
    const data = props.dataList;
    const [imgurl, setimgurl] = useState<string>('');

    const getBase64 = (img: Blob, callback: { (imageUrl: any): void; (arg0: string | ArrayBuffer | null): any; }) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
      }
      
    const beforeUpload = (file: { type: string; size: number; }) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('图片仅支持 JPG/PNG 文件!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('图片不能超过 2MB!');
        }
        return isJpgOrPng && isLt2M;
    }
    const handleChange = (info:any) => {
        if (info.file.status === 'uploading') {
            setimgurl('');
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, imageUrl =>
                setimgurl(imageUrl),
            );
        }
        console.log(info)
    }
    return (
        <Upload
        name="avatar"   
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imgurl ? <img src={imgurl} alt="avatar" style={{ width: '100%' }} /> : '+'}
      </Upload>
    )
}
export default select